<template>
	<view v-if="props.list && props.list.length > 0" class="cu-card article" :class="props.isCard ? 'no-card' : ''">
		<view v-for="(item, index) in props.list" :key="index" :data-index="index" :data-value="item" @click="handleSelect"
			class="cu-item shadow">
			<view class="content margin-top-sm">
				<image v-if="item.thumbnail" :src="item.thumbnail" mode="aspectFill" />
				<view v-else class="bg-image">
					<text class="image-title">{{ item.name }}</text>
				</view>
				<view class="desc">
					<view class="item-title">{{ item.name }}
						<text class="margin-left cu-tag round light bg-green">
							{{item.shopTypeName}}
						</text>
					</view>
					<view>
						<text class="text-green margin-left-xs">4.8分</text>
						<text class="text-gray text-size-12 margin-left-xs">100人觉得很赞</text>
					</view>

					<view style="width: 100%;" v-if="item.description" class="margin-top-sm cu-tag  bg-green text-sm margin-left-xs">
						<view class="text-sigle">
								{{ item.description }}
						</view>
					
					</view>
					<view class="margin-top-sm cu-tag flexn  light text-sm">
						<view class="cuIcon-location text-orange margin-right-xs"></view>
						<view style="width: calc(100% - 1rem);" class="text-sigle">{{ item.address }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		useSettingStore
	} from '@/stores/index';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		isCard: {
			type: [Boolean, String],
			default: false
		},
		list: {
			default: () => {
				return [{
					"id": "19956651090000141",
					"communityId": "18853483084000176",
					"housingEstateIds": [],
					"housingEstateNames": [],
					"communityName": "清源社区",
					"shopTypeId": "19616324709000129",
					"shopTypeName": "桶装水",
					"thumbnail": "https://www.shuimuqingyuan.cn/img/2023-11-19/ff91aaf6d74b40a094a97642574c58f0.jpg",
					"name": "清源水业",
					"address": "四川省成都市武侯区武侯祠大街264号",
					"region": "30121",
					"lon": "104.04311",
					"lat": "30.64242",
					"description": "清源",
					"businessLicense": "https://www.shuimuqingyuan.cn/img/2023-11-19/5c2d3cdc0c5441b58bc055029e302efa.jpg",
					"liaison": "孙秋龙",
					"phone": "17308354855",
					"corporationName": "",
					"idCardFront": "https://www.shuimuqingyuan.cn/img/2023-11-19/02d959599f9e4450b0fd716cb414638c.jpg",
					"idCardBack": "https://www.shuimuqingyuan.cn/img/2023-11-19/24c8010f86fe4159877ea8636ea6ff97.jpg",
					"foodBusinessLicense": "https://www.shuimuqingyuan.cn/img/2023-11-19/20373be42a2341d5ae4aa7ec696cfd31.jpg",
					"businessState": 1,
					"startTime": null,
					"endTime": null,
					"state": 1,
					"opinion": "",
					"createTime": "2023-11-19 12:31:51"
				}]
			}
		}
	});
	const handleSelect = (e : any) => {
		emit('action', e.currentTarget.dataset.value);
	};
</script>

<style lang="scss">
	.cu-item {
		border: 1px solid #efefef;
	}

	.cu-card>.cu-item {
		display: block;
		background-color: #ffffff;
		overflow: hidden;
		border-radius: 10rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 0px rgba(203, 203, 203, 0.5);
		border-radius: 8px;
	}

	.item-title {
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 20px;
		letter-spacing: 1px;
	}

	.cu-card.article>.cu-item .content>image {
		width: 90px;
		background: #fff;
		height: 6.4em;
		margin-right: 20rpx;
		border-radius: 4rpx;
	}

	.bg-image {
		width: 90px;
		background: #0660C9;
		height: 6.4em;
		margin-right: 20rpx;
		border-radius: 6rpx;
		padding: 10px;
		text-align: center;

		.image-title {
			color: #fff;
			writing-mode: tb-rl;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: center;
			height: 6.6em;
			font-size: 12px;
		}
	}

	.cu-card.article>.cu-item .content .desc {
		justify-content: start;
		width: calc(100% - 90px);
	}
</style>